/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
async function getChannel(){
  const res = await axios({
    url: "/v1_0/channels"
  })
  const channels = res.data.channels;
  const html = channels.map(ele=>{
    return `<option value="${ele.id}">${ele.name}</option>`
  }).join("");
  document.querySelector(".form-select").innerHTML = "<option>请选择文章频道</option>"+ html
}
getChannel()

/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector(".img-file").addEventListener("change",async function(e){
  const fd = new FormData();
  fd.append("image",e.target.files[0]);
  const res = await axios({
    url: "/v1_0/upload",
    method: "post",
    data: fd
  })
  document.querySelector(".rounded").src = res.data.url;
  document.querySelector(".rounded").classList.add("show");
  document.querySelector(".place").classList.add("hide");
})
document.querySelector(".rounded").addEventListener("click",function(){
  document.querySelector(".img-file").click();
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector(".send").addEventListener("click",function(){
  if(edit.innerHTML !== "提交") return;
  const myForm = document.querySelector(".art-form");
  const data = serialize(myForm,{hash:true,empty: true});
  delete data.id;
  data.cover = {
    type: 1,
    images: [document.querySelector(".rounded").src]
  }
  axios({
    url: "/v1_0/mp/articles",
    method: "post",
    data
  }).then(()=>{
    myAlert(true, "表单提交成功")
    myForm.reset();
    editor.setHtml("");
    document.querySelector(".rounded").src = "";
    document.querySelector(".rounded").classList.remove("show");
    document.querySelector(".place").classList.remove("hide");
    setTimeout(()=>{
      location.href = "../content/index.html"
    },1500)
  }).catch(err=>{
    myAlert(false, err.response.data.message)
  })
})

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
;(function () {
  const pObj = new URLSearchParams(location.search);
  pObj.forEach((value,key)=>{
    if(key === "id"){
      document.querySelector(".title").innerHTML = `<span>修改文章</span>`;
      document.querySelector(".send").innerHTML = `修改`;
      axios({
        url: `/v1_0/mp/articles/${value}`
      }).then(res=>{
        const data = res.data;
        const rObj = {
          id: data.id,
          title: data.title,
          channel_id: data.channel_id,
          content: data.content,
          cover: data.cover.images[0]
        }
        Object.keys(rObj).forEach(key => {
          if(key === "cover"){
            if(rObj[key]){
              document.querySelector(".place").classList.add("hide");
              document.querySelector(".rounded").classList.add("show"); 
              document.querySelector(".rounded").src = rObj[key];
            }
          } else if(key === "content"){
            editor.setHtml(`${rObj[key]}`);
          } else{
            document.querySelector(`[name=${key}]`).value = rObj[key];
          }
        })
      })
    } 
  })
})()


/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
const edit = document.querySelector(".send");
edit.addEventListener("click",function(){
  if(edit.innerHTML !== "修改") return;
  const form = document.querySelector(".art-form");
  const data = serialize(form,{hash:true,empty:true});
  data.cover = {
    type: document.querySelector('.rounded').src? 1 : 0,
    images: [document.querySelector('.rounded').src]
  }
  axios({
    url: `/v1_0/mp/articles/${data.id}`,
    method: "put",
    data
  }).then(()=>{
    myAlert(true, "修改成功");
  }).catch(err=>{
    myAlert(false, err.response.data.message);
  })
})